<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="newBlog-button">
          <el-button>分享</el-button>
          <el-button type="primary" @click="newBlog">新建博客文档</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="blog-title-block">{{blogInfo.mainBlogTitle}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="blog-desc-block">{{blogInfo.blogDesc}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="blog-auth-block">{{blogInfo.ownerNickName}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="blog-sub-block">{{blogInfo.sub}}</div></el-col>
    </el-row>
    <div class="second-head">
      <div class="left-font">目录</div>
      <div class="right-font">管理目录</div>
    </div>
    <el-divider content-position="left">博客列表</el-divider>
    <div class="blog-content" v-for="(blog, index) in blogListInfo" :key="index">
      <div class="content-block">
        <div class="left-block">
          <div class="blog-title">{{blog.title}}</div>
          <div class="blog-desc">{{blog.blogDesc}}</div>
          <div class="blog-stuff">
            <div class="blog-auth">{{blog.ownerNickname}}</div>
            <div class="blog-createtime">{{blog.createTime}}</div>
          </div>
        </div>
        <div class="right-block">
          <div class="blog-img"><img :src="blog.blogCover"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBlogList, newBlog } from '@/api/content'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      baseImgUrl: 'http://localhost:8041/uploadBlogCover/',
      blogInfo: {},
      blogListInfo: {
        title: '',
        blogDesc: '',
        ownerNickname: '',
        createTime: '',
        blogCover:''
      }
    }
  },
  mounted(){
    
  },
  created(){
    this.fetchBlogList(this.token)
  },
  computed: {
    ...mapGetters([
      'nickName',
      'token'
    ])
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    fetchBlogList(param){
      getBlogList(param).then(response => {
        console.log(response)
        this.blogListInfo = response.data
      })
    },
    newBlog(){
      this.$message('新建博客!')
      newBlog().then(response => {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.newBlog-button{
  width: 100%;
  height: 100%;
  text-align: right;
}
.blog-title-block{
  font-weight: 900;
  margin: 0 auto;
  text-align: center;
}
.blog-title{
  font-weight: 700;
}
.blog-desc-block{
  text-align: center;
}
.blog-auth-block{
  text-align: center;
}
.blog-sub-block{
  text-align: center;
}
.second-head{
  margin: 0 auto;
  width: 75%;
}
.left-font{
  display: inline;
}
.right-font{
  display: inline;
  float: right;
}
.blog-content{
  width: 70%;
  margin: 0 auto;
}
.content-block{
  width: 100%;
  /* margin: 0 auto;
  display: inline-block; */
  display: block;
}
.left-block{
  width: 70%;
  display: inline-block;
  height: 100%;
}
.right-block{
  width: 30%;
  display: inline-block;
  height: 100%;
}
.blog-stuff{
  width: 100%;
  display: block;
}
.blog-auth{
  display: inline-block;
}
.blog-createtime{
  display: inline-block;
}
</style>

